import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Row } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { addAgentCat, deleteAgentCat } from '@/services/supplier/store/storeType'
import { router } from 'umi'

const StoreType = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [catId, setCatId] = useState('')
  const [modelShow, setModelShow] = useState(false)

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    switch (type) {
      case 1:
        router.push(`/supplier/store/storeShow`)
        break
    }
  }
  // 添加分类
  const addCat = () => {
    setModelShow(true)
  }
  // 删除分类
  const deleteCat = async () => {
    let params = {
      catId
    }
    let res = await deleteAgentCat(params)
    if (res.code === '0') {
      alert(res.msg)
    } else {
      alert(res.msg)
    }
  }
  // 保存分类
  const saveCat = () => {
    form.validateFields( async (err, values) => {
      console.log('Received values of form: ', values)
      let res = await addAgentCat(values)
      if (res.code === '0') {
        alert(res.msg)
      } else {
        alert(res.msg)
      }
    })
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <div style={{display: 'flex', flexDirection: 'column', background: '#fff', marginBottom: '24px'}}>
        <div style={{width: '100px', textAlign: 'center', padding: '12px'}}>
          <Button type="primary" shape="circle" size="large" onClick={() => addCat()}>+</Button>
          <div style={{marginTop: '6px'}}>添加分类</div>
        </div>
      </div>
      {modelShow && <>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item label="ICON名称" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('catName', {})
                (<Input />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="ICON图片" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('catLogo', {})
                (<Input />)}
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item label="ICON名称" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
              {getFieldDecorator('sort', {})
                (<Input />)}
            </Form.Item>
          </Col>
        </Row>
        <Button type="default" onClick={() => deleteCat()}>删除该分类</Button>
        <Button type="primary" onClick={() => saveCat()}>保存</Button>
      </>}
   </PageHeaderWrapper>
  )
}

export default Form.create()(StoreType)
